<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('报告名称')" prop="reportName">
            <el-input v-model="form.reportName" :placeholder="$t('报告名称')" show-word-limit maxlength="127" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('报告模版')" prop="fileId">
            <el-input v-model="form.fileId" :placeholder="$t('文件ID')" show-word-limit maxlength="32" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item :label="$t('报告模版')" prop="fileList">
            <span slot="label">
              {{ $t('报告模版') }}
              <el-tooltip placement="top">
                <div slot="content">
                  <span v-html="`关键字:{{ 关键字 }}<br/>表格:{{ #关键字 }}<br/>循环表格:{{?关键字}} {{/关键字}}`" />
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <div v-if="form.fileList !== null && form.fileList !== '' && form.fileList !== undefined && form.fileList.length > 0" style="width: 100%;">
              <span :title="form.fileList[0].name" style="cursor: pointer;color: #3da4fc">
                <i class="el-icon-paperclip" style="margin-right:5px;" />{{ form.fileList[0].name }}
              </span>
              <span style="margin-left:10px">
                <el-divider direction="vertical" />
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-view"
                  style="margin-left: 10px;"
                  @click.native="onlinePreview(form.fileList[0])"
                >{{ $t('预览') }}</el-button>
                <el-button type="text" icon="el-icon-download" size="small" @click.native="downLoadFileOpens(form.fileList[0].id)">下载</el-button>
                <el-button type="text" icon="el-icon-document-delete" size="small" @click.native="deleteFile(form)">删除</el-button>
              </span>
              <!-- <el-dropdown-menu slot="dropdown">
                <el-dropdown-item com @click.native="onlinePreview(form.fileList[0])">{{ $t('预览') }}</el-dropdown-item>
                <el-dropdown-item @click.native="downLoadFileOpens(form.fileList[0].id)">{{ $t('下载') }}</el-dropdown-item>
                <el-dropdown-item @click.native="deleteFile(form)">{{ $t('删除') }}</el-dropdown-item>
              </el-dropdown-menu> -->
            </div>
            <div v-if="form.fileList === null || form.fileList === '' || form.fileList === undefined || form.fileList.length <= 0">
              <uploadSingle
                ref="uploadSingle"
                :data-type="'report_template'"
                :business-id="form.id"
                upload-style="color: #fff;background-color: #67c23a;cursor: pointer;border-radius: 4px;border: 1px solid #67c23a;width: 65px;text-align:center"
                :upload-btn-name="$t('上传')"
                @onFileSuccess="onFileSuccess"
                @okPostUploadHook="okPostUploadHook()"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 关键字列表 -->
      <div class="area-header" style="margin-top: 15px;">
        <span class="area-header-title">{{ $t('关键字列表') }}</span>
      </div>
      <el-table
        :data="form.keywordList"
        border
        class="nowrapTable formTable"
      >
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('字段名称')" align="center" width="250">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('字段名称') }}</span>
            <el-tooltip placement="top">
              <div slot="content">
                <span v-text="`Word模版中的关键字, 例:{{ deal_name }}中的deal_name`" />
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'keywordList.' + scope.$index + '.columnName'" :rules="keywordListRules.columnName">
              <el-input v-model="scope.row.columnName" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('类型')" align="center" width="150">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('类型') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'keywordList.' + scope.$index + '.columnType'" :rules="keywordListRules.columnType">
              <dict-select
                v-model="scope.row.columnType"
                dictionary="report_template_keyword_type"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="center">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('备注') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'keywordList.' + scope.$index + '.remark'">
              <el-input v-model="scope.row.remark" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('排序')" align="center" width="150">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('排序') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'keywordList.' + scope.$index + '.sort'">
              <el-input-number v-model="scope.row.sort" controls-position="right" :placeholder="$t('排序')" :precision="0" :max="10000000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('Sql脚本')" align="center" width="120">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('Sql脚本') }}</span>
          </template>
          <template slot-scope="scope">
            <!-- <el-form-item :prop="'keywordList.' + scope.$index + '.columnSql'" :rules="keywordListRules.columnSql">
              <el-input v-model="scope.row.columnSql" />
            </el-form-item> -->
            <el-button
              size="small"
              type="text"
              @click="columnSqlHandle(scope.$index, scope.row.columnSql, 'keyword')"
            >{{ $t('配置') }}</el-button>
            <el-button
              v-if="scope.row.columnType === 'loopTables'"
              size="small"
              type="text"
              @click="columnNestingLoopHandle(scope.$index, scope.row)"
            >{{ $t('嵌套') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="70">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.$index, scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addKeyWord">{{ $t("添加") }}</el-button>
      </div>
      <!-- 参数列表 -->
      <div class="area-header" style="margin-top: 15px;">
        <span class="area-header-title">{{ $t('查询参数列表') }}</span>
      </div>
      <el-table
        :data="form.parameterList"
        border
        class="nowrapTable formTable"
      >
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('查询参数名称')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('查询参数名称') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.parameterName'" :rules="parameterListRules.parameterName">
              <el-input v-model="scope.row.parameterName" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('查询参数类型')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('查询参数类型') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.parameterType'" :rules="parameterListRules.parameterType">
              <dict-select
                v-model="scope.row.parameterType"
                dictionary="report_parameter_type"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('查询参数格式')" align="center">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('查询参数格式') }}</span>
            <el-tooltip placement="top">
              <div slot="content">
                <span v-html="'year : yyyy <br /> month : yyyy-MM <br /> date : yyyy-MM-dd <br />日期不填写默认为：date'" />
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.parameterFormat'" :rules="parameterListRules.parameterFormat">
              <el-input v-model="scope.row.parameterFormat" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('字典类型')">
          <template slot-scope="scope">
            <el-form-item :prop="'keywordList.' + scope.$index + '.parameterDict'">
              <el-select v-model="scope.row.parameterDict" clearable filterable :placeholder="$t('请选择')">
                <el-option
                  v-for="dict in dictOptions"
                  :key="dict.dictType"
                  :label="$t(dict.dictName)"
                  :value="dict.dictType"
                >
                  <span style="float: left">{{ $t(dict.dictName) }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('参数关键字标识')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('参数关键字标识') }}</span>
            <el-tooltip placement="top">
              <div slot="content">
                <span v-html="'Sql配置中的查询项 <br />例：select deal_name from deal_base where id = ${id} 中的 ${id}'" />
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.parameterKey'" :rules="parameterListRules.parameterKey">
              <el-input v-model="scope.row.parameterKey" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('排序')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('排序') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.sort'" :rules="parameterListRules.sort">
              <el-input-number v-model="scope.row.sort" label="排序" :min="0" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="center">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('备注') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'parameterList.' + scope.$index + '.remark'">
              <el-input v-model="scope.row.remark" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="50">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteParameterHandle(scope.$index, scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addParameter">{{ $t("添加") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn :disabled="disabledUploading" has-permi="market:report" />
    </div>

    <el-dialog v-el-drag-dialog :title="$t('Sql脚本')" :visible.sync="sqlOpen" width="70%" class="dataForm" append-to-body destroy-on-close :close-on-click-modal="false" :lock-scroll="false">
      <div style="height: 450px;overflow: auto;padding: 20px;margin: -20px;">
        <textarea ref="sqlScript" v-model="sqlScript" class="codesql" />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="onSave">{{ $t("保存") }}</el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :title="$t('嵌套循环')" :visible.sync="nestingLoopOpen" width="80%" class="dataForm" append-to-body destroy-on-close :close-on-click-modal="false" :lock-scroll="false">
      <el-form ref="form" :model="nestingLoopForm" :rules="rules" label-width="120px" class="dataForm">
        <!-- 关键字列表 -->
        <div class="area-header" style="margin-top: 15px;">
          <span class="area-header-title">{{ $t('循环表格列表') }}</span>
        </div>
        <el-table
          v-loading="nestingLoopLoading"
          :data="nestingLoopForm.nestingLoopList"
          border
          class="nowrapTable formTable"
        >
          <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="60">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('循环表格名称')" align="center" width="250">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('循环表格名称') }}</span>
              <el-tooltip placement="top">
                <div slot="content">
                  <span v-html="'循环表格中的嵌套循环，若使用父循环中的字段作为条件 例:{dealId}则取父循环中的dealId。<br />使用方法与父循环表格一致，在父循环表格中{{?嵌套表格名称}}开始，{{/嵌套表格名称}}结尾'" />
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'nestingLoopList.' + scope.$index + '.columnName'" :rules="nestingLoopListRules.columnName">
                <el-input v-model="scope.row.columnName" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('类型')" align="center" width="150">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('类型') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'nestingLoopList.' + scope.$index + '.columnType'" :rules="nestingLoopListRules.columnType">
                <dict-select
                  v-model="scope.row.columnType"
                  dictionary="report_template_keyword_type"
                  disabled
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('备注') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'nestingLoopList.' + scope.$index + '.remark'" :rules="nestingLoopListRules.remark">
                <el-input v-model="scope.row.remark" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('排序')" align="center" width="150">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('排序') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'nestingLoopList.' + scope.$index + '.sort'" :rules="nestingLoopListRules.sort">
                <el-input-number v-model="scope.row.sort" controls-position="right" :placeholder="$t('排序')" :precision="0" :max="10000000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('Sql脚本')" align="center" width="120">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('Sql脚本') }}</span>
            </template>
            <template slot-scope="scope">
              <!-- <el-form-item :prop="'nestingLoopList.' + scope.$index + '.columnSql'" :rules="nestingLoopListRules.columnSql">
              <el-input v-model="scope.row.columnSql" />
            </el-form-item> -->
              <el-button
                size="small"
                type="text"
                @click="columnSqlHandle(scope.$index, scope.row.columnSql, 'nestingLoop')"
              >{{ $t('配置') }}</el-button>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="70">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="deleteNestingLoopHandle(scope.$index, scope.row)"
              >{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addNestingLoopKeyWord">{{ $t("添加") }}</el-button>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCloseNestingLoop">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="onSaveNestingLoop">{{ $t("保存") }}</el-button>
      </div>
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>

<script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'

const CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
import { saveMarketReportTemplate, getMarketReportTemplate } from '@/api/market/report/marketReportTemplate'
import { delMarketReportTemplateParameter } from '@/api/market/parameter/marketReportTemplateParameter'
import { delMarketReportTemplateKeyword } from '@/api/market/keyword/marketReportTemplateKeyword'
import uploadSingle from '@/components/File/Upload/single.vue'
import { delFile } from '@/api/file/fileBase'
import { downLoadFileOpen } from '@/utils/zipdownload'
import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
export default {
  components: {
    uploadSingle
  },
  data() {
      return {
          disabledUploading: false,
          // 表单参数
          form: {},
          nestingLoopForm: {
            nestingLoopList: []
          },
          // 遮罩层
          loading: false,
          nestingLoopLoading: false,
          // 表单校验
          rules: {
          },
          keywordListRules: {
            columnName: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
              ],
            columnSql: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
              ],
            columnType: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ]
          },
          nestingLoopListRules: {
            columnName: [
              { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ],
            columnSql: [
              { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ],
            columnType: [
              { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ]
          },
          parameterListRules: {
            parameterName: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ],
            parameterKey: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ],
            parameterType: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ],
            sort: [
                { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ]
          },
          sqlOpen: false,
          sqlScript: '',
          sqlType: undefined,
          editor: {},
          sqlIndex: null,
          nestingLoopOpen: false,
          nestingLoopList: [],
          nestingLoopIndex: null,
          // 字典信息
          dictOptions: []
      }
  },
  created() {
    /** 查询字典下拉列表 */
    getDictOptionselect().then(response => {
        this.dictOptions = response.data
      })
  },
  methods: {
      // 初始化数据
      init(data) {
          this.loading = true
          if (data != null && data.id !== undefined) {
              getMarketReportTemplate(data.id).then(response => {
                  this.form = response.data
                  this.loading = false
              }).catch(() => {
                this.loading = false
              })
          } else {
              this.reset()
              this.loading = false
          }
      },
      // 表单重置
      reset() {
          this.form = {
              id: undefined,
              reportName: undefined,
              fileId: undefined,
              delFlag: undefined,
              createBy: undefined,
              createTime: undefined,
              updateBy: undefined,
              updateTime: undefined,
              keywordList: [],
              parameterList: []
          }
          this.resetForm('form')
      },
      // 取消按钮
      cancel() {
          this.$parent.$parent.formOpen = false
          this.$parent.$parent.reset()
      },
      // 关闭form页面
      closeForm() {
          // 关闭form页面遮罩层
          this.loading = false
          // 关闭form页面
          if (this.$parent.$parent.formOpen !== undefined) {
            this.$parent.$parent.formOpen = false
          }
          // 刷新list页面
          if (this.$parent.$parent.getList !== undefined) {
            this.$parent.$parent.getList()
          }
      },
      /** 提交按钮 */
      submitForm() {
          this.$refs['form'].validate(valid => {
              if (valid) {
                  this.loading = true
                  saveMarketReportTemplate(this.form).then(response => {
                      if (response.code === 200) {
                          this.msgSuccess(this.$t('保存成功'))
                          this.closeForm()
                      } else {
                          this.msgError(response.msg)
                      }
                      this.loading = false
                  })
              } else {
                  this.locationError(document)
              }
          }).catch(() => {
              this.loading = false
          })
      },
      addKeyWord() {
      const row = {
        id: undefined,
        reportId: this.form.id,
        columnName: undefined,
        columnSql: undefined,
        sort: (this.form.keywordList.length + 1) * 10,
        remark: undefined,
        children: []
      }
      if (!(this.form.keywordList instanceof Array)) {
        this.$set(this.form, 'keywordList', [])
      }
      this.$nextTick(() => {
        this.form.keywordList.push(row)
      })
      },
      // 关键字列表删除
    deleteHandle(index, row) {
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(function() {
            return delMarketReportTemplateKeyword(id)
          }).then(() => {
            this.form.keywordList.splice(index, 1)
          return this.msgSuccess(this.$t('删除成功'))
        })
          .catch(function() {})
      } else {
        this.form.keywordList.splice(index, 1)
      }
    },
    addNestingLoopKeyWord() {
      const row = {
        id: undefined,
        reportId: this.form.id,
        columnName: undefined,
        columnType: 'loopTables',
        columnSql: undefined,
        sort: (this.nestingLoopForm.nestingLoopList.length + 1) * 10,
        remark: undefined
      }
      if (!(this.nestingLoopForm.nestingLoopList instanceof Array)) {
        this.$set(this.nestingLoopForm, 'nestingLoopList', [])
      }
      this.$nextTick(() => {
        this.nestingLoopForm.nestingLoopList.push(row)
      })
    },
    // 关键字列表删除
    deleteNestingLoopHandle(index, row) {
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
            return delMarketReportTemplateKeyword(id)
        }).then(() => {
          this.nestingLoopForm.nestingLoopList.splice(index, 1)
          return this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {})
      } else {
        this.nestingLoopForm.nestingLoopList.splice(index, 1)
      }
    },
    onFileSuccess(that, file) {
      this.$nextTick(() => {
        this.form.fileList = [{ id: file.fileId, name: file.fileName }]
      })
      this.disabledUploading = false
    },
    okPostUploadHook() {
      this.disabledUploading = true
    },
    // 预览附件
    onlinePreview(row) {
      this.$refs.OnlinePreview.onlinePreviewFile(row.id)
    },
    deleteFile(row) {
      this.loading = true
      delFile(row.fileList[0].id).then(response => {
        if (response.code === 200) {
          row.fileList = null
          this.msgSuccess(response.msg)
        } else {
          this.msgError(response.msg)
        }
        this.loading = false
      })
    },
    downLoadFileOpens(id) {
      downLoadFileOpen(id)
    },
    addParameter() {
      const row = {
        id: undefined,
        reportId: this.form.id,
        parameterName: undefined,
        parameterType: undefined,
        parameterKey: undefined,
        sort: (this.form.parameterList.length + 1) * 10,
        remark: undefined
      }
      if (!(this.form.parameterList instanceof Array)) {
        this.$set(this.form, 'parameterList', [])
      }
      this.$nextTick(() => {
        this.form.parameterList.push(row)
      })
    },
      // 关键字列表删除
    deleteParameterHandle(index, row) {
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(function() {
            return delMarketReportTemplateParameter(id)
          }).then(() => {
          this.form.parameterList.splice(index, 1)
          return this.msgSuccess(this.$t('删除成功'))
        })
          .catch(function() {})
      } else {
        this.form.parameterList.splice(index, 1)
      }
    },
    columnSqlHandle(index, data, type) {
      // console.log(index, data)
      this.sqlIndex = index
      this.sqlOpen = true
      this.sqlScript = data
      this.sqlType = type
      this.$nextTick(() => {
        this.loadSql()
      })
    },
    columnNestingLoopHandle(index, data) {
      this.nestingLoopLoading = true
      // console.log(index, data)
      this.nestingLoopIndex = index
      this.nestingLoopOpen = true
      // 使用深拷贝将 data.children 的值赋给 this.nestingLoopForm.nestingLoopList
      this.nestingLoopForm.nestingLoopList = JSON.parse(JSON.stringify(data.children))
      this.$nextTick(() => {
        this.loadSql()
      })
      this.nestingLoopLoading = false
    },
    onClose() {
      this.sqlOpen = false
    },
    onSave() {
      this.sqlScript = this.editor.getValue()
      if (this.sqlIndex || this.sqlIndex === 0) {
        if (this.sqlType === 'keyword') {
          this.form.keywordList[this.sqlIndex].columnSql = this.sqlScript
        }
        if (this.sqlType === 'nestingLoop') {
          this.nestingLoopForm.nestingLoopList[this.sqlIndex].columnSql = this.sqlScript
        }
      }
      this.sqlOpen = false
    },
    loadSql() {
      if (this.$refs?.sqlScript !== undefined) {
        const mime = 'text/x-mariadb'
        // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
        this.editor = CodeMirror.fromTextArea(this.$refs.sqlScript, {
          mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
          indentWithTabs: true,
          smartIndent: true,
          lineNumbers: true,
          matchBrackets: true,
          // theme: theme,
          autofocus: false,
          extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键
          hintOptions: {
            // 自定义提示选项
            tables: {
              users: ['name', 'score', 'birthDate'],
              countries: ['name', 'population', 'size']
            }
          }
        })

        this.editor.on('cursorActivity', function() {
          if (this !== null) {
            this.editor.showHint()
          }
        })
        this.editor.setValue('')
        this.$nextTick(() => {
          this.editor.setValue(this.sqlScript !== null ? this.sqlScript : '')
        })
      }
    },
    onCloseNestingLoop() {
      this.nestingLoopOpen = false
    },
    onSaveNestingLoop() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.nestingLoopLoading = true
          if (this.nestingLoopIndex || this.nestingLoopIndex === 0) {
            this.form.keywordList[this.nestingLoopIndex].children = this.nestingLoopForm.nestingLoopList
          }
          this.nestingLoopOpen = false
        }
      }).catch(() => {
        this.nestingLoopLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.CodeMirror{
  height: 100%!important;
}
</style>
